<template>
	<view>
		<view
			v-if="!loading && list.length > 0"
		>
			<view
				v-for="(item, index) in list"
				:key="index"
				class="bg-white font-14 pad-y-10 pad-x-15 mar-b-10"
				@click.native.stop="handleItemClick(item)"
			>
				<view class="flex align-center">
					<text class="iconfont icon-kehu mar-r-5"></text>
					<text class="color-7e7e7e">客户：</text>
					<text class="color-7e7e7e">{{ item.customerName }}</text>
				</view>
				
				<view class="flex justify-between mar-t-5">
					<view class="flex align-center">
						<text class="iconfont icon-lianxiren mar-r-5"></text>
						<text class="color-7e7e7e">联系人：</text>
						<text class="color-7e7e7e">{{ item.contacts}}</text>
					</view>
					
					<view class="flex align-center">
						<text class="iconfont icon-shoujihao mar-r-5 color-black"></text>
						<text class="color-7e7e7e">{{ item.mobile }}</text>
					</view>
				</view>
				
				<view class="flex align-center mar-t-5">
					<text class="iconfont icon-chexing mar-r-5"></text>
					<text class="color-7e7e7e">车型：</text>
					<text class="color-7e7e7e">{{ item.cartType }}</text>
				</view>
				
				<view class="flex align-center mar-t-5">
					<text class="iconfont icon-5daiweiguanli mar-r-5"></text>
					<text class="color-7e7e7e">报修人：</text>
					<text class="color-7e7e7e">{{ item.repairPerson }}</text>
				</view>
				
				<view class="flex align-center mar-t-5">
					<text class="iconfont icon-shijian mar-r-5"></text>
					<text class="color-7e7e7e">报修时间：</text>
					<text class="color-7e7e7e">{{ item.createTime }}</text>
				</view>
			</view>
		</view>
		
		<view v-if="list.length > 0" class="flex justify-center mar-t-40 pad-b-20 color-999999">
			<text>~ 没有更多数据了</text>
		</view>
		
		<!-- 页面加载 -->
		<u-loading-page :loading="loading" loadingText="加载中..." fontSize="16px"></u-loading-page>
		
		<!-- 空数据 -->
		<u-empty
			v-if="list.length === 0 && !loading" mode="data"
			text="~暂无数据"
			icon="http://cdn.uviewui.com/uview/empty/data.png"
		></u-empty>
	</view>
</template>

<script>
	import List from '@/components/Repair/List/index'
	
	import { mapState } from 'vuex'
	import { checkLogin } from '@/utils/lib'
	import { getList } from '@/apis/repairDispatch/repairDispatch'
	
	export default {
		components: {
			List,
		},
		
		computed: {
			...mapState({
				token: state => state.user.token,
				longitude: state => state.user.longitude,
				latitude: state => state.user.latitude,
				textMsgList: state => state.repair.textMsgList,
				pictureList: state => state.repair.pictureList,
				voiceList: state => state.repair.voiceList,
				videoList: state => state.repair.videoList,
				repairList: state => state.repair.repairList
			})
		},
		
		data() {
			return {
				// 标签状态：0 处理中，1 已处理
				// 这个和后台接口的状态不一致，需要自行判断，因为后台接口给的状态有点乱
				state: 1,
				
				// 加载
				loading: false,
				
				// 列表数据
				list: []
			}
		},
		
		onLoad() {
			this.findList()
		},
		
		onShow() {
			checkLogin()
		},
		
		methods: {
			// 查询列表
			findList() {
				this.loading = true
				let params = {
					state: 5,
					token: this.token,
					location: this.longitude + ',' + this.latitude
				}
				
				getList(params).then(res => {
					this.loading = false
					console.log(res)
				}).catch(err => {
					this.loading = false
				})
				
				// setTimeout(() => {
				// 	this.loading = false
				// 	this.list = [
				// 		{
				// 			id: 1,
				// 			customerName: '张三',
				// 			contacts: '李四',
				// 			cartType: '叉车',
				// 			repairPerson: '冯宁宁',
				// 			mobile: '15258485657',
				// 			createTime: '2024/11/06 08:20'
				// 		}, {
				// 			id: 2,
				// 			customerName: '张三2',
				// 			contacts: '李四2',
				// 			cartType: '叉车2',
				// 			repairPerson: '冯宁宁2',
				// 			mobile: '15258485657',
				// 			createTime: '2024/11/06 08:25'
				// 		},
				// 	]
					
				// 	uni.setNavigationBarTitle({
				// 		title: `已处理` + (this.list.length > 0 ? `(${this.list.length})` : '')
				// 	})
				// }, 500)
			},
			
			// 跳转到详情页
			handleItemClick(row) {
				uni.navigateTo({
					url: `/pages/repairDispatch/details/details?state=${ this.state }&orderNo=${ row.id }`
				})
			},
		}
	}
</script>

<style>

</style>
